<template>
	<view>
		<view class="borderDiv">
			<uni-forms :modelValue="formData" ref="form" label-width="100px">
				<uni-forms-item label="申请类型：" name="applyWay">
					{{ formData.applyWay === 1 ? '填报入会' : '扫码入会' }}
				</uni-forms-item>
				<view class="line-bottom"></view>
				<uni-forms-item label="姓名：" name="applyUserName">
					{{ formData.applyUserName }}
				</uni-forms-item>
				<view class="line-bottom"></view>
				<uni-forms-item label="性别：" name="sex" v-if="formData.applyIdCard">
					{{ getGenderFromIdCard }}
				</uni-forms-item>
				<view class="line-bottom"></view>
				<uni-forms-item label="联系电话：" name="applyPhone">
					{{ formData.applyPhone }}
				</uni-forms-item>
				<view class="line-bottom"></view>
				<uni-forms-item label="身份证号码：" name="applyIdCard">
					{{ maskedIdCard }}
				</uni-forms-item>
			</uni-forms>
		</view>
		<view class="borderDiv">
			<uni-forms :modelValue="formData" ref="form" label-width="100px">

				<view v-if="showScancode">
					<uni-forms-item label="政治面貌：" name="politicalStatus">
						{{ getpoliticalStatusOptions }}
					</uni-forms-item>
					<view class="line-bottom"></view>
					<uni-forms-item label="是否具有固定工作单位：" name="hasFixedJob">
						{{ formData.hasFixedJob ? '是' : '否' }}
					</uni-forms-item>
					<view class="line-bottom"></view>
					<uni-forms-item label="职业类型：" name="jobType">
						{{ getjobTypeListData }}
					</uni-forms-item>
					<view class="line-bottom"></view>
					<uni-forms-item label="灵活就业类型：" name="flexibleEmploymentType">
						{{ getemploymentTypeOptionsData }}
					</uni-forms-item>
					<view class="line-bottom"></view>
					<uni-forms-item label="工作所在地或居住地：" name="workOrResidenceLocationStr">
						{{ formData.workOrResidenceLocationStr }}
					</uni-forms-item>
					<view class="line-bottom"></view>
					<uni-forms-item label="工作单位是否已建会：" name="companyHasUnion">
						{{ formData.companyHasUnion ? '是' : '否' }}
					</uni-forms-item>
					<view class="line-bottom"></view>
					<uni-forms-item label="申请加入工会：" name="settledUnionName">
						<view class="flex">
							<text class="flex1">{{ formData.settledUnionName }}</text>
						</view>
					</uni-forms-item>
				</view>
			</uni-forms>
		</view>
		<view class="borderDiv">
			<uni-section title="审批意见">
				<view class="textBack">
					<textarea class="textarea" :disabled="!activeListStatus"
						v-model="formData.enrollApprovalRecordsLog.approvalReason" @input="updateRemainingChars"
						placeholder=""></textarea>

					<text class="remaining-chars">{{ remainingChars }} </text>
				</view>
			</uni-section>
		</view>

		<!-- 		<uni-forms label-width="100px">
			<uni-forms-item label="审批意见：" name="opinion">
				<view class="textBack">
					<textarea class="textarea" :disabled="!activeListStatus"
						v-model="formData.enrollApprovalRecordsLog.approvalReason" placeholder=""></textarea>
				</view>
			</uni-forms-item>
		</uni-forms> -->

		<view class="btn1 flex" v-if="activeListStatus">
			<button class="button1 flex1 margin20" :loading="buttonLoading" @click="handleReject">
				驳回
			</button>
			<button class="button flex1" :loading="buttonLoadings" @click="handleApprove">
				同意
			</button>
		</view>
	</view>
</template>

<script>
	import {
		getDictsList
	} from '../../api/system/dicts';
	import {
		selectWaitAuditEnrollApprovalRecordsQueryID,
		selectWaitAuditEnrollApprovalRecordsQueryselectById,
		updateApprovalStatus
	} from '../../api/work/approvalmanagement';
	import {
		toast
	} from '../../utils/common';

	export default {
		data() {
			return {
				remainingChars: '',
				buttonLoading: false,
				buttonLoadings: false,
				showScancode: true,
				politicalStatusOptions: [],
				employmentTypeOptions: [],
				userDid: null,
				jobTypeList: [],
				activeListStatus: true,
				formData: {
					applyWay: '',
					applyUserName: '',
					applyPhone: '',
					applyIdCard: '',
					politicalStatus: '',
					hasFixedJob: '',
					jobType: '',
					flexibleEmploymentType: '',
					workOrResidenceLocationStr: '',
					companyHasUnion: '',
					settledUnionName: '',
					currentunion: '',
					Currentemployer: '',
					Transferunion: '',
					Transferwork: '',
					reason: '',
					opinion: '',
					status: null,
					enrollApprovalRecordsLog: {
						approvalDate: new Date(),
						approvalReason: '测试通过',
					}
				}
			};
		},

		onLoad(option) {
			console.log(option);
			if (!option.activeList) {
				this.loadData(option.id);
				this.activeListStatus = true
			} else {
				this.activeListStatus = false
				this.loadDataselectById(option.id);

			}
			this.getDictsListData();
		},
		methods: {
			/**
			 * 字符长度计算
			 */
			updateRemainingChars() {
				this.remainingChars = 200 - this.formData.enrollApprovalRecordsLog.approvalReason.length;
			},
			loadData(id) {
				selectWaitAuditEnrollApprovalRecordsQueryID(id)
					.then(res => {
						this.formData = res.data;
					})
					.catch(err => {
						console.error(err);
					});
			},
			loadDataselectById(id) {
				selectWaitAuditEnrollApprovalRecordsQueryselectById(id)
					.then(res => {
						this.formData = res.data;
					})
					.catch(err => {
						console.error(err);
					});
			},
			getDictsListData() {
				getDictsList('political_status')
					.then(res => {
						this.politicalStatusOptions = res.data.map(item => ({
							...item,
							text: item.dictLabel,
							value: item.dictValue
						}));
					})
					.catch(err => {
						this.politicalStatusOptions = [];
						console.error(err);
					});
				getDictsList('job_type')
					.then(res => {
						this.jobTypeList = res.data.map(item => ({
							...item,
							text: item.dictLabel,
							value: item.dictValue
						}));
					})
					.catch(err => {
						console.error(err);
					});
				getDictsList('flexible_employment_type')
					.then(res => {
						this.employmentTypeOptions = res.data.map(item => ({
							...item,
							text: item.dictLabel,
							value: item.dictValue
						}));
					})
					.catch(err => {
						console.error(err);
					});
			},
			handleReject() {

				if (this.formData.enrollApprovalRecordsLog.approvalReason.length === 0) {
					toast('请输入审批意见')
					return
				}

				this.buttonLoading = true
				this.formData.status = 1;
				this.updateApprovalStatus();
			},
			handleApprove() {
				this.buttonLoadings = true
				this.formData.status = 0;
				this.updateApprovalStatus();
			},
			updateApprovalStatus() {
				console.log(this.formData);
				updateApprovalStatus(this.formData)
					.then(() => {
						toast('处理成功');
						this.buttonLoading = false
						this.buttonLoadings = false
						setTimeout(() => {
							uni.redirectTo({
								url: `/pages/work/approvalmanagement`
							});
						}, 1000);
					})
					.catch(err => {
						setTimeout(() => {
							uni.redirectTo({
								url: `/pages/work/approvalmanagement`
							});
						}, 1000);
						// 处理失败的提示
						toast(err.msg);
					});

			}
		},
		computed: {
			maskedIdCard() {
				const idCard = this.formData.applyIdCard;
				// 假设掩码规则是只显示前6位和后4位
				return idCard ?
					idCard.replace(/^(\d{6})\d+(\d{4})$/, '$1********$2') :
					'';
			},
			getGenderFromIdCard() {
				const idCard = this.formData.applyIdCard;
				// 检查身份证号码是否为有效长度
				if (typeof idCard !== 'string' || idCard.length < 18) {
					return '未知'; // 增强错误处理
				}

				// 获取倒数第二位的数字
				const secondLastDigit = parseInt(idCard.charAt(idCard.length - 2), 10);

				// 判断性别：奇数为男，偶数为女
				return secondLastDigit % 2 === 0 ? '女' : '男';
			},
			getpoliticalStatusOptions() {
				const matchedItem = this.politicalStatusOptions.find(item => item.dictValue == this.formData
					.politicalStatus);
				return matchedItem ? matchedItem.text : '未知';
			},
			getjobTypeListData() {
				const matchedItem = this.jobTypeList.find(item => item.dictValue == this.formData.jobType);
				return matchedItem ? matchedItem.text : '未知';
			},
			getemploymentTypeOptionsData() {
				const matchedItem = this.employmentTypeOptions.find(item => item.dictValue == this.formData
					.flexibleEmploymentType);
				return matchedItem ? matchedItem.text : '未知';
			}
		}
	}
</script>



<style lang="scss" scoped>
	.remaining-chars {
		position: absolute;
		bottom: -22rpx;
		right: 80rpx;
		color: #e5e5e5;
	}

	.borderDiv {
		background-color: #fff;
		margin: 32rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		overflow: hidden;
	}


	.textBack {
		width: 100%;
		margin: 0 30rpx;

		.textarea {
			width: 630rpx;
			background-color: rgba(245, 245, 245, 1);
			border-radius: 15rpx;
			margin-bottom: 30rpx;
			height: 200rpx;
			padding: 15rpx;
			font-size: 25rpx;
		}
	}

	::v-deep .uni-forms {
		// margin-top: 16rpx;
		// padding: 32rpx;
		background-color: #fff;

	}

	.uni-forms-item {
		margin: 20rpx !important;
	}

	::v-deep .uni-forms-item__label[data-v-61dfc0d0] {
		color: #666666;

	}

	::v-deep .uni-forms-item__content[data-v-61dfc0d0] {
		color: #333333;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	::v-deep .uni-forms-item {
		margin-bottom: 0;
	}

	.icon {
		width: 20px;
		height: 20px;
	}

	.button1 {
		border-radius: 46rpx;
		background: #fff;
		color: rgba(189, 26, 45, 1);
		font-size: 32rpx;
		border: 1px solid rgba(189, 26, 45, 1);
	}

	.line-bottom {
		border-bottom: 0.6px solid #E5E5E5;
		margin: 16rpx 0;
	}

	.agree {
		padding: 32rpx;
		// margin-top: 16rpx;

		.left {
			width: 52rpx;
		}

		.right {
			.text {
				font-size: 12px;
				color: rgba(189, 26, 45, 1);
			}
		}
	}
</style>